<!--
/**
* Author: txj
* Date: 22023年10月26日10:11:50
* Desc: 底部支付及明细
*/
-->
<template>
  <view class="footer-main">
    <view v-if="showMore" class="bg-main"> </view>
    <view class="order-footer flex-col home-wrap">
      <view v-if="showMore" class="showMore">
        <view class="flex-b-m">
          <view class="action-sheet-title fs32 mb20"> 价格明细 </view>
          <view class="mb20" @click.stop="close()">
            <u-icon size="22" name="close" color="#ADB5B7"></u-icon>
          </view>
        </view>
        <view v-for="(item, index) in getList" :key="index">
          <view v-if="item.type === '0'" class="flex-b-m mb10">
            <view class="flex">
              <view class="mr20"> {{ item.name }} </view>
              <view v-if="item.useCoupon" class="icon">券兑换</view>
            </view>
            <view :class="item.color === 'yellow' ? 'fc-yellow>' : ''">
              {{ item.value }}</view
            >
          </view>
          <view v-if="item.type === '1'" class="flex-b-m mb10">
            <view> {{ item.name }} </view>
            <view>
              <view class="tr del">
                {{ item.value }}
              </view>
              <view class="fc-yellow fs22">
                {{ item.more }}
              </view>
            </view>
          </view>
        </view>
      </view>
      <view class="flex-b-m">
        <view>
          <price
            :price="getNeedPrice"
            unit-size="28"
            price-size="42"
            custom-class="txt"
            color="#FFB415"
          ></price>
          <view v-if="servicePrice > 0">技术服务费{{ servicePrice }}元</view>
        </view>
        <view class="footer-detail flex-s-m">
          <view @click="openPlan" class="flex-right flex flex-m">
            <view class="txt"> 明细 </view>
            <view :class="{ arrow_down: showMore }">
              <u-icon size="12" name="arrow-down" color="#ADB5B7"></u-icon>
            </view>
          </view>
          <view class="btn-toPay" :class="extPayClass" @click="handlePay">
            立即付款
          </view>
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  import Price from '@/components/Price'
  export default {
    mixins: [],
    name: 'OrderInfoFooter',
    components: { Price },
    props: {
      value: Boolean,
      extPayClass: String,
      servicePrice: [String, Number],
      getNeedPrice: [String, Number], //获取折扣后的价格
      list: {
        type: Array,
        default: () => {
          return []
        }
      }
    },
    data() {
      console.log('servicePrice', this.servicePrice)
      if (this.servicePrice) {
        console.log('servicePrice1111', this.servicePrice)
      }
      return {}
    },
    mounted() {},
    computed: {
      showMore: {
        set(v) {
          this.$emit('input', v)
        },
        get() {
          return this.value
        }
      },
      getList() {
        console.log('getListgetList', this.list)
        return this.list
      }
    },
    methods: {
      close() {
        this.$emit('input', false)
      },
      openPlan() {
        this.$emit('showMore')
      },
      handlePay() {
        this.$emit('goPay')
      }
    }
  }
</script>
<style lang="scss">
  .footer-main {
  }
  .bg-main {
    position: fixed;
    bottom: 0;
    top: 0;
    left: 0;
    right: 0;
    background: rgba($color: #000000, $alpha: 0.4);
  }
  .showMore {
    min-height: 135rpx;
    height: auto;
    transition: height 0.5s;
    z-index: 120;
    padding-bottom: 10rpx;
    width: 100%;
  }
  .order-footer {
    z-index: 110;
    width: 100%;
    background: #fff;
    padding: 32rpx 30rpx 32rpx 33rpx !important;
    border-radius: 18rpx 18rpx 0 0;
    position: fixed;
    bottom: 0;
    .icon {
      padding: 3rpx 5rpx;
      text-align: center;
      background: #ffa800;
      border-radius: 8rpx;
      width: 90rpx;
      font-size: 18rpx;
      color: #ffffff;
    }
    .btn-toPay {
      width: 276rpx;
      height: 100rpx;
      background: linear-gradient(135deg, #55baff 0%, #23e6d8 100%);
      border-radius: 18rpx;
      color: #fff;
      text-align: center;
      line-height: 100rpx;
      font-size: 36rpx;
      margin-left: 26rpx;
      &.disabledPay {
        background: #dfdfdf;
      }
    }

    .closeMore {
      background: #fff;
      height: 0;
      overflow: hidden;
      transition: height 0.5s;
    }
    .footer-detail {
      .txt {
        color: #adb5b7;
        font-size: 26rpx;
      }
    }
  }
</style>
